<!--  -->
<template>
  <div class="liquidfill">
    <div id="echartsId" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
function getColor(value) {
  return value > 0 && value <= 0.5
    ? 'rgba(97,216,0,.7)'
    : value > 0.5 && value <= 0.8
    ? 'rgba(204,178,26,.7)'
    : value > 0.8
    ? 'rgba(241,47,28,.7)'
    : '#c7c7cb'
}
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      let mychart = this.$echarts.init(document.getElementById('echartsId'))
      var value = 0.49
      var data = [value, value, value]
      let option = {
        backgroundColor: '#eeeeee',
        title: {
          text: (value * 100).toFixed(0) + '{a|%}',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#bcb8fb',
            rich: {
              a: {
                fontSize: 28,
              },
            },
          },
          x: 'center',
          y: '35%',
        },

        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '60%',
            children: [
              {
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
              },
            ],
          },
        ],

        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            // shape: 'roundRect',
            data: data,
            backgroundStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(68, 145, 253, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(68, 145, 253, .25)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(68, 145, 253, 1)',
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 20,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(69, 73, 240, 0)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(69, 73, 240, .25)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(69, 73, 240, 1)',
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: '#000',
              },
            },
            label: {
              normal: {
                formatter: '',
              },
            },
          },
        ],
      }
      mychart.setOption(option, true)
      window.onresize = mychart.resize
    },
  },
}
</script>
<style lang="less" scoped>
.liquidfill {
  width: 100%;
  height: 100%;
}
</style>
